<template>
    <div class="container">
        <div v-if="!utils.getIsApp()" class="common-header-wrap">
            <mt-header title="确认订单" class="common-header">
                <mt-button slot="left" icon="back" @click="$router.go(-1)"></mt-button>
            </mt-header>
        </div>
        <div class="tea-order-detail-head">
            {{
            info.order_state==1?'待报价':info.order_state==2?'待付款':info.order_state==3?'已取消':info.order_state==4?'已付款':'已完成'
            }}
        </div>
        <div class="made-time">
            <div class="made-time-title">{{info.shot_lists.case.name}}</div>
            <div class="made-time-main">
                <div class="made-time-list">出发日期：{{info.shot_lists.start.substring(0,info.shot_lists.start.length-8)}}
                </div>
                <div v-if="info.shot_lists.end" class="made-time-list">返程日期：{{info.shot_lists.end.substring(0,info.shot_lists.end.length-8)}}</div>
            </div>
        </div>
        <div class="star-address">
            <div style="font-weight: bold">出发地</div>
            <div class="address-content">{{info.shot_lists.city.name}}</div>
        </div>
        <div class="star-address">
            <div style="font-weight: bold">选择景区</div>
            <div class="address-content">{{spot(info.shot_lists).toString()}}</div>
        </div>
        <div class="star-address">
            <div style="font-weight: bold">选择驿站</div>
            <div class="address-content">{{post(info.shot_lists).toString()}}</div>
        </div>
        <div class="star-address">
            <div style="font-weight: bold">出游人群</div>
            <div class="address-content">{{info.shot_lists.people==1?'单人':'团体'}}</div>
        </div>
        <div class="star-address">
            <div style="font-weight: bold">选择旅行社</div>
            <div class="address-content">{{info.shot_lists.user.name}}</div>
        </div>
        <div class="star-address">
            <div style="font-weight: bold">选择酒店</div>
            <div class="address-content">{{info.shot_lists.hotel.name}}</div>
        </div>
        <div class="star-address">
            <div style="font-weight: bold">选择车辆</div>
            <div class="address-content">{{info.shot_lists.cart.name}}</div>
        </div>
        <div class="star-address">
            <div style="font-weight: bold">选择餐食</div>
            <div class="address-content">{{info.shot_lists.food.toString()}}</div>
        </div>
        <div class="submit-meal">
            <div class="submit-meal-title">联系人信息</div>
            <div class="submit-information-list">
                <div class="information-title">姓名</div>
                <div class="information-input">{{info.shot_lists.name}}</div>
            </div>
            <div class="submit-information-list">
                <div class="information-title">手机</div>
                <div class="information-input">{{info.shot_lists.mobile}}</div>
            </div>
        </div>
        <div class="submit-meal">
            <div class="submit-meal-title">备注</div>
            <div class="submit-remarks">
                {{info.shot_lists.remark}}
            </div>
        </div>
        <div class="star-address">
            <div style="font-weight: bold">报价金额</div>
            <div class="offer-money">¥{{info.offer_money}}</div>
        </div>
        <div class="tea-order-information">
            <div style="font-weight: bold">订单信息</div>
            <div class="address-content">订单号：{{info.order_sn}}</div>
            <div class="address-content">提交时间：{{info.create}}</div>
            <div v-if="info.order_state>1&&info.order_state!=3" class="address-content">报价时间：{{info.offer_time}}</div>
            <div v-if="info.order_state>=4" class="address-content">付款时间：{{info.payment_time}}</div>
        </div>
        <div class="order-list-opratio">
            <!-- 锁定-->
            <mt-switch v-if="info.order_state==2" v-model="pd_pay">使用余额</mt-switch>
            <div style="width: 1px;height: 1px"></div>

            <div class="btn">
                <!-- 取消订单 -->
                <button v-if="info.order_state==1||info.order_state==2"
                        style="background: white;border: 1px solid #ccc;color: #313131"
                        v-on:click="cancel(info)">取消订单
                </button>
                <!--修改订单-->
                <button v-if="info.order_state==1" v-on:click="orderedit(info.id)">修改订单</button>
                <!-- 收货 -->
                <button v-if="info.order_state==4" v-on:click="receive(info.id)">确认完成</button>
                <!-- 付款 -->
                <!-- 收货 -->
                <button v-if="info.order_state==2" v-on:click="pay()">付款</button>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    import {getTravelorderdetail, getTravelordercomplete, getTravelbuypay} from '../../../api/travel'
    import {Toast, Indicator,Switch,MessageBox} from 'mint-ui'

    export default {
        name: 'Teatravelorderdetail',

        data() {
            return {
                info: '', //详情数据
                pd_pay: false, //是否余额支付
                password: '', //支付密码
            }
        },
        created() {
        },
        components: {
            Switch,
        },
        computed: {
            ...mapState({
                buy: state => state.travel.buy,
                buyshow: state => state.travel.buyshow
            }),
        },
        mounted() {
            this.getTravelorderdetail();
        },
        methods: {
            ...mapMutations({
                clearbuy: 'clearbuy',
            }),

            //修改订单
            orderedit(){
                if(this.info.case_type==1){
                    this.$router.push({name:'HomeTeatravelsubmit1',query:{id:this.info.case_id,edit_id:this.info.id}})
                }else{
                    this.$router.push({name:'HomeTeatravelsubmit2',query:{edit_id:this.info.id}})
                }
                // this.$router.push({name: 'HomeTeaorderedit', query: {id: orderId}})
            },

            //景区显示
            spot(data) {
                let res = [];
                for (let i = 0; i < data.spot.length; i++) {
                    res.push(data.spot[i].name)
                }
                return res
            },

            //驿站显示
            post(data) {
                let res = [];
                for (let i = 0; i < data.post.length; i++) {
                    res.push(data.post[i].name)
                }
                return res
            },

            //获取详情
            getTravelorderdetail() {
                getTravelorderdetail(this.$route.query.id).then(res => {
                    this.info = res.result;
                }).catch(function (error) {
                    Toast(error.message)
                })
            },

            //订单完成
            receive(orderId) {
                MessageBox.confirm('确定该订单已完成吗？').then(action => {
                    getTravelordercomplete(orderId).then(res => {
                        this.getTravelorderdetail()
                    }).catch(function (error) {
                        Toast(error.message)
                    })
                })
            },

            //取消订单
            cancel(orderInfo) {
                MessageBox.confirm('确定要取消该订单吗？').then(action => {
                    getTravelordercancle(orderInfo.id).then(res => {
                        this.getTravelorderdetail()
                    }).catch(function (error) {
                        Toast(error.message)
                    })
                })
            },

            //付款
            pay() {
                    if (this.pd_pay) {
                        this.getTravelbuypay()
                        return;
                    }
                    if(this.utils.getIsApp()){
                        getTravelbuypay(this.info.payer_sn, 1).then(res => {
                            window.webkit.messageHandlers.getIosPay.postMessage({body: this.info.payer_sn,price:res.result.pay_info.need_amount});
                        }).catch(function (error) {
                            Toast(error.message);
                        });
                        return;
                    }
                    this.$router.push({
                        name: 'HomeTeatravelpay',
                        query: {payer_sn: this.info.payer_sn}
                    })
            },

            //付款接口
            getTravelbuypay() {
                MessageBox.prompt('<b>请输入支付密码</b><br/>注：默认支付密码为：123456', '', {
                    showCancelButton: true,
                    inputType: 'password'
                }).then(({value, action}) => {
                    this.password = value;
                    Indicator.open();
                    getTravelbuypay(this.info.payer_sn, 2, value).then(res => {
                        Indicator.close();
                        if(this.utils.getIsApp()){
                            getTravelbuypay(this.info.payer_sn, 1).then(res => {
                                window.webkit.messageHandlers.getIosPay.postMessage({body: this.info.payer_sn,price:res.result.pay_info.need_amount});
                            }).catch(function (error) {
                                Toast(error.message);
                            });
                            return;
                        }
                        this.$router.push({
                            name: 'HomeTeatravelpay',
                            query: {payer_sn: this.info.payer_sn}
                        })
                    }).catch((error) => {
                        Indicator.close();
                        if(error.code==12001){
                            this.$router.push({name:'HomeTeaorderlist'})
                        }else {
                            Toast(error.message)
                        }
                    })
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .offer-money{
        color: $primaryColor;
        font-size: .8rem;
        font-weight: bold;
    }
    .btn {
        padding: 20px 0;
        display: flex;
        justify-content: flex-end;
        border-radius: 0.1rem;

        button {
            width: 4rem;
            height: 1.3rem;
            font-size: 0.6rem;
            border-radius: 0.1rem;
            margin: 0.35rem 0.75rem 0.35rem 0;
            background-color: $primaryColor;
            border: none;
            color: white;
            border-radius: 5px;
        }
    }

    .tea-order-detail-head {
        background: $primaryColor;
        color: white;
        font-size: .9rem;
        font-weight: bold;
        padding: 25px;
    }

    .submit-meal {
        margin-top: 10px;
        background: white;
        padding: 10px 25px;

        .submit-meal-title {
            font-size: .7rem;
            font-weight: bold;
        }

        .submit-information-list {
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;

            .information-title {
                font-size: .6rem;
                margin-right: 20px;
            }

            .information-input {
                font-size: .6rem;
                color: #B5B5B5;
            }
        }

        .submit-remarks {
            font-size: .6rem;
            color: #B5B5B5;
            margin-top: 6px;
        }
    }

    .star-address {
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 25px;
        font-size: .7rem;
        background: white;
        align-items: center;

        .address-content {
            color: #B5B5B5;
            font-size: .6rem
        }
    }

    .tea-order-information {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        padding: 10px 25px;
        font-size: .7rem;
        background: white;

        .address-content {
            color: #B5B5B5;
            font-size: .6rem
        }
    }

    .made-time {
        padding: 10px 25px;
        background: white;

        .made-time-title {
            font-size: .8rem;
            font-weight: bold;
        }

        .made-time-main {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-top: 5px;

            .made-time-list {
                color: $primaryColor;
                font-size: .6rem;
            }
        }
    }

    .teatravel-foot {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        font-size: .9rem;
        font-weight: bold;
        color: white;
        background: $primaryColor;
        text-align: center;
        line-height: 40px;
    }

    .order-list-opratio {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-left: 20px;
    }

    /deep/ .mint-switch-label {
        font-size: .6rem;
        font-weight: bold;
    }

    /deep/ .mint-switch-core {
        width: 45px;
        height: 25px;
    }

    /deep/ .mint-switch-core::before {
        width: 43px;
        height: 23px;
    }

    /deep/ .mint-switch-core::after {
        width: 23px;
        height: 23px;
    }
</style>
